"use client"

import Image from "next/image"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import type { CartItem } from "@/types"
import { Receipt } from "lucide-react"

interface OrderSummaryProps {
  items: CartItem[]
  subtotal: number
  deliveryFee: number
  total: number
}

export function OrderSummary({ items, subtotal, deliveryFee, total }: OrderSummaryProps) {
  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="text-base flex items-center gap-2">
          <Receipt className="h-4 w-4" />
          订单详情
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 商品列表 */}
        <div className="space-y-3">
          {items.map((item) => (
            <div key={item.id} className="flex items-center gap-3">
              <div className="relative w-12 h-12 rounded-lg overflow-hidden bg-muted flex-shrink-0">
                <Image
                  src={item.image || "/placeholder.svg"}
                  alt={item.name}
                  fill
                  className="object-cover"
                  sizes="48px"
                />
              </div>

              <div className="flex-1 min-w-0">
                <h4 className="font-medium text-sm leading-tight truncate">{item.name}</h4>
                <p className="text-xs text-muted-foreground">
                  ¥{item.price.toFixed(1)} × {item.quantity}
                </p>
              </div>

              <div className="text-sm font-medium">¥{(item.price * item.quantity).toFixed(2)}</div>
            </div>
          ))}
        </div>

        {/* 费用明细 */}
        <div className="border-t border-border pt-4 space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">商品小计</span>
            <span>¥{subtotal.toFixed(2)}</span>
          </div>

          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">配送费</span>
            <span>{deliveryFee > 0 ? `¥${deliveryFee.toFixed(2)}` : "免费"}</span>
          </div>

          <div className="border-t border-border pt-2">
            <div className="flex justify-between font-semibold text-lg">
              <span>总计</span>
              <span className="text-primary">¥{total.toFixed(2)}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
